<template>
  <view
    class="tui-slider__box"
    :style="{
      width: width + 'px',
      height: height + 'px',
      borderRadius: radius,
      background: backgroundColor,
      border: border,
    }"
  >
    <view
      class="tui-slider__glided"
      :style="{
        background: activeColor,
        borderTopLeftRadius: radius,
        borderBottomLeftRadius: radius,
      }"
    ></view>
    <view
      class="tui-slider__block"
      :style="{
        width: blockWidth + 'px',
        height: blockHeight + 'px',
        marginTop: `-${blockHeight / 2}px`,
        borderRadius: blockRadius,
        boxShadow: blockShadow,
        border: blockBorder,
        background: blockColor,
      }"
      :change:prop="parse.slidevalue"
      :prop="initValue"
      :data-blockWidth="blockWidth"
      :data-width="width"
      :data-step="step"
      :data-min="min"
      :data-max="max"
      :data-disabled="disabled"
      :data-value="start"
      :data-endValue="end"
      :data-section="section"
      @touchstart="parse.touchstart"
      @touchmove="parse.touchmove"
      @touchend="parse.touchend"
    >
      <slot name="start"></slot>
      <view
        v-if="showValue"
        class="tui-value__box"
        :class="['tui-value__' + position]"
        :style="{
          backgroundColor: boxColor,
          padding: padding,
          color: valueColor,
          fontSize: valueSize + 'rpx',
          zIndex: zIndex,
        }"
        @touchmove.stop="stop"
      >
        {{ formatValue(start) }}
        <view
          :class="['tui-triangle__' + position]"
          :style="{
            borderColor:
              position == 'top'
                ? `${boxColor} transparent transparent transparent`
                : `transparent transparent ${boxColor} transparent`,
          }"
        ></view>
      </view>
    </view>

    <view
      v-if="section"
      class="tui-section__block"
      :style="{
        width: blockWidth + 'px',
        height: blockHeight + 'px',
        marginTop: `-${blockHeight / 2}px`,
        borderRadius: blockRadius,
        boxShadow: blockShadow,
        border: blockBorder,
        background: blockColor,
      }"
      :change:prop="parse.sectionSlidevalue"
      :prop="initEndValue"
      :data-blockWidth="blockWidth"
      :data-width="width"
      :data-step="step"
      :data-min="min"
      :data-max="max"
      :data-disabled="disabled"
      :data-value="start"
      :data-endValue="end"
      :data-section="section"
      @touchstart="parse.sectionTouchstart"
      @touchmove="parse.sectionTouchmove"
      @touchend="parse.sectionTouchend"
    >
      <slot name="end"></slot>
      <view
        v-if="showValue"
        class="tui-value__box"
        :class="['tui-value__' + position]"
        :style="{
          backgroundColor: boxColor,
          padding: padding,
          color: valueColor,
          fontSize: valueSize + 'rpx',
          zIndex: zIndex,
        }"
        @touchmove.stop="stop"
      >
        {{ formatValue(end) }}
        <view
          :class="['tui-triangle__' + position]"
          :style="{
            borderColor:
              position == 'top'
                ? `${boxColor} transparent transparent transparent`
                : `transparent transparent ${boxColor} transparent`,
          }"
        ></view>
      </view>
    </view>
    <view
      class="tui-section__glided"
      :style="{
        background: activeColor,
        borderTopRightRadius: radius,
        borderBottomRightRadius: radius,
      }"
    ></view>
  </view>
</template>
<script src="./tui-slider.wxs" module="parse" lang="wxs"></script>
<script>
export default {
  name: 'tuiSlider',
  emits: ['change', 'changing'],
  props: {
    //slider宽度 px
    width: {
      type: Number,
      default: 240,
    },
    //slider高度 px
    height: {
      type: Number,
      default: 4,
    },
    border: {
      type: String,
      default: '0',
    },
    //slider圆角
    radius: {
      type: String,
      default: '2px',
    },
    //最小值
    min: {
      type: Number,
      default: 0,
    },
    //最大值
    max: {
      type: Number,
      default: 100,
    },
    //步长，取值必须大于 0，并且可被(max - min)整除
    step: {
      type: Number,
      default: 1,
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    //当前取值（起始）
    value: {
      type: Number,
      default: 0,
    },
    //是否为区间选择/显示
    section: {
      type: Boolean,
      default: false,
    },
    //当前取值（结束），section为true时生效
    endValue: {
      type: Number,
      default: 0,
    },
    //滑块左侧已选择部分的线条颜色
    activeColor: {
      type: String,
      default: '#5677fc',
    },
    //滑块右侧背景条的颜色
    backgroundColor: {
      type: String,
      default: '#e9e9e9',
    },
    //滑块宽度 px
    blockWidth: {
      type: Number,
      default: 20,
    },
    //滑块高度 px
    blockHeight: {
      type: Number,
      default: 20,
    },
    //滑块背景颜色
    blockColor: {
      type: String,
      default: '#fff',
    },
    //滑块圆角
    blockRadius: {
      type: String,
      default: '50%',
    },
    //滑块阴影
    blockShadow: {
      type: String,
      default: '#b2b2b2 0 0 10rpx',
    },
    //滑块边框
    blockBorder: {
      type: String,
      default: '0',
    },
    //是否显示当前value
    showValue: {
      type: Boolean,
      default: false,
    },
    //value显示位置 top，bottom
    position: {
      type: String,
      default: 'top',
    },
    //value显示格式，如：￥value,显示时value会被替换成数值
    valueFormat: {
      type: String,
      default: 'value',
    },
    //value框z-index值
    zIndex: {
      type: Number,
      default: 10,
    },
    //value框颜色
    boxColor: {
      type: String,
      default: 'rgba(255,255,255,.9)',
    },
    padding: {
      type: String,
      default: '2px 6px',
    },
    //value字体颜色
    valueColor: {
      type: String,
      default: '#333',
    },
    //value字体大小 rpx
    valueSize: {
      type: Number,
      default: 30,
    },
  },
  watch: {
    value(val) {
      this.initValue = val;
      this.start = val;
    },
    endValue(val) {
      this.initEndValue = val;
      this.end = val;
    },
  },
  data() {
    return {
      start: 0,
      end: 0,
      initValue: 0,
      initEndValue: 0,
    };
  },
  created() {
    this.start = this.value || this.min;
    this.end = this.endValue || this.max;
    setTimeout(() => {
      this.initValue = this.value;
      this.initEndValue = this.endValue || this.max;
    }, 10);
  },
  methods: {
    getParams(e) {
      let val = e.value;
      if (this.section && !e.isStart) {
        this.end = val;
      } else {
        this.start = val;
      }
      let params = {
        value: this.start,
      };
      if (this.section) {
        params.endValue = this.end;
      }
      return params;
    },
    change(e) {
      let params = this.getParams(e);
      this.$emit('change', params);
    },
    changing(e) {
      let params = this.getParams(e);
      this.$emit('changing', params);
    },
    formatValue(val) {
      let value = val;
      if (this.valueFormat) {
        value = this.valueFormat.replace('value', val);
      }
      return value;
    },
    stop() {},
  },
};
</script>

<style scoped>
.tui-slider__box {
  width: 100%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.tui-slider__glided {
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  overflow: hidden;
}

.tui-section__glided {
  width: 0;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  overflow: hidden;
}

.tui-slider__trans {
  transition: all 0.2s;
}

.tui-slider__block {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  left: 0;
  top: 50%;
}

.tui-section__block {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  right: 0;
  top: 50%;
}

.tui-value__box {
  position: absolute;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.tui-value__top {
  left: 50%;
  top: 0;
  transform: translate(-50%, -100%);
  margin-top: -10px;
}

.tui-triangle__top {
  position: absolute;
  top: 97%;
  left: 50%;
  transform: translate(-50%, 0);
  border-width: 5px;
  border-style: solid;
}

.tui-value__bottom {
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  margin-top: 10px;
}

.tui-triangle__bottom {
  position: absolute;
  top: 1rpx;
  left: 50%;
  transform: translate(-50%, -100%);
  border-width: 5px;
  border-style: solid;
}
</style>
